<template>
  <div class="page">
    <h3>欢迎进入微信授权</h3>
    <van-swipe class="my-swipe" indicator-color="white" @change="onChange">
      <van-swipe-item>1. 
      </van-swipe-item>
      <van-swipe-item>2
      </van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <van-steps :active="activeStep" active-icon="success" active-color="#07c160">
      <van-step>【欢迎】
      </van-step>
      <van-step>【授权】
      </van-step>
      <van-step>【账户】
      </van-step>
      <van-step>【审核】
      </van-step>
    </van-steps>
    <div v-if="activeStep === 0">
      <!-- Content for step 0 -->
      <div>
        <span>欢迎进入微信授权]</span>
        <p>只限员工使用，员工微信授权页面</p>
        <van-button block type="primary" icon="logistics" @click="nextStep">开始</van-button>
      </div>
    </div>
    <div v-else-if="activeStep === 1">
      <h1>微信授权</h1>
      <span> 微信openid：{{wxOpenid}}  </span>  
      <van-button type="primary" icon="wechat" @click="nextStep">授权</van-button>
    </div>
    <div v-else-if="activeStep === 2">
      <div class="input-info">
        <span>【用户信息】</span>
        <van-field v-model="username" placeholder="请输入用户名"></van-field>
        <van-field v-model="password" placeholder="请输入密码" type="password"></van-field>
        <van-button type="success" icon="user-o" @click="handleAccount">提交</van-button>
      </div>
    </div>
    <div v-else-if="activeStep === 3">
      <!-- Content for step 3 -->
      <h1>等待审核</h1>
      <p>This is the content for the 等待审核 step.</p>
    </div>
  </div>
</template>
  
<script setup name ="wxFirstAuth">
  import wxAuth from '@/api/wx/wxAuth.js'
  import {
    ref,
    onMounted
  } from 'vue'
  import {
    Step,
    Steps,
    Button,
    Divider,
    showDialog,
    showConfirmDialog
  } from 'vant';
  import {
    useRouter
  } from "vue-router";
  import {
    showToast
  } from 'vant';
  const activeStep = ref(0)
  const username = ref('')
  const password = ref('')
  const wxOpenid = ref('')
  const nextStep = () => {
    activeStep.value++;
  }
  const validate = () => {
    if (username.value || password.value) {
      showToast('请输入用户名和密码');
      return false;
    }
    return true;
  }
  const handleAccount = () => {
    if (validate()) {
      service
        .post('/wxapi/wxAuth/bingUser', {
          username: username.value,
          password: password.value
        })
        .then((res) => {
          if (res.code == 200) {
            showConfirmDialog("成功了！");
            activeStep.value++;
          }
        })
    }
  }
  // const stepStatuses = computed(() => {
  //   return Array.from({ length: totalSteps.value }, (_, index) =>
  //     completedSteps.value.includes(index) ? 'process' : 'wait'
  //   );
  // }
  // );
</script>

<style>
  .page {
    background-color: #f5f5f5;
    height: 100vh;
    padding-left: 10px;
    padding-right: 10px;
  }
  .welcome-info {
    background-color: #79deaa;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
    background-color: #39a9ed;
  }
  .input-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .input-info .van-button {
    margin-top: 20px;
  }
</style>